<!DOCTYPE HTML>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="keywords" content="${channel.keywords!}"/>
<meta http-equiv="description" content="${channel.description!}"/>
<title>${channel.title!channel.name} - ${site.name} - Powered by JavaCMS</title>
<script src="${resSys}/jquery.js" type="text/javascript"></script>
<script src="${resSys}/front.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	Cms.channelViewCount("${base}","${channel.id}");
	Cms.siteFlow("${base}", location.href, document.referrer,"${site.config.flowSwitch?string}");
});
</script>
<script type="text/javascript" src="/${res}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/${res}/js/jquery.DB_tabMotionBanner.min.js"></script>
<link type="text/css" rel="stylesheet" href="/${res}/css/index.css" />

<!--[if lt IE 9]> 
<script src="/${res}/js/html5shiv.min.js"></script>
<script src="/${res}/js/respond.min.js"></script>
<![endif]-->

<head>
<body>
[#include "../include/top.html"/]
[#include "../include/header.html"/]
<div class="DB_tab25">
        <ul class="DB_bgSet">
            <li style="background:url(/${res}/images/pic01.jpg) center center no-repeat;"></li>
            <li style="background:url(/${res}/images/pic02.jpg) center center no-repeat;"></li>
        </ul>
        <ul class="DB_imgSet">
            <li onclick="javascript:window.location.href='#';">
                <img class="DB_1_1" src="/${res}/images/pic01_1.png" alt="" />
                <img class="DB_1_2" src="/${res}/images/pic01_2.png" alt="" />
                <img class="DB_1_3" src="/${res}/images/pic01_3.png" alt="" />
                <img class="DB_1_4" src="/${res}/images/pic01_4.png" alt="" />
            </li>
            <li onclick="javascript:window.location.href='#';">
                <img class="DB_2_1" src="/${res}/images/pic02_1.png" alt="" />
                <img class="DB_2_2" src="/${res}/images/pic02_2.png" alt="" />
                <img class="DB_2_3" src="/${res}/images/pic02_3.png" alt="" />
            </li>
        </ul>
        <div class="DB_menuWrap">
            <div style="position:absolute;text-align:center;bottom:25px; height:3px; z-index:999; width:100%;">
            <ul class="DB_menuSet">
                <li></li><li></li>
            </ul>
            </div>            
        </div>
         <script type="text/javascript">
        $('.DB_tab25').DB_tabMotionBanner({
            key: 'b28551',
            autoRollingTime: 4000,
            bgSpeed: 1000,
            motion: {
                DB_1_1: { left: -50, opacity: 0, speed: 1200, delay: 500 },
                DB_1_2: { left: 0, opacity: 0, speed: 1500, delay: 1500 },
                DB_1_3: { left: -50, opacity: 0, speed: 1200, delay: 500 },
				DB_1_4: { top: -20, opacity: 0, speed: 1200, delay: 1500 },
                DB_2_1: { left: 200, opacity: 0, speed: 1500, delay: 500 },
                DB_2_2: { left: -200, opacity: 0, speed: 1500, delay: 500 },
                DB_2_3: { left: -200, opacity: 0, speed: 1500, delay: 500 },
                end: null
            }
        })
    </script>
</div>   
<div class="main container clearfix">  
  <section class="tssj">
    <div class="tssjNav"></div>
[@cms_content_page count='6' typeId='2' orderBy='4' titLen='18' channelId=channel.id channelOption='1' dateFormat='yyyy-MM-dd HH:mm:ss'] 
    <div class="tssjList clearfix"> 
     [#list tag_pagination.list as a]
      <div class="tssjItem" [#if (a_index+1)%3=1]style="margin-left:0;"[/#if]>
        <div class="biankuang biankuang_1"></div>
		<div class="biankuang biankuang_2"></div>
		<div class="biankuang biankuang_3"></div>
		<div class="biankuang biankuang_4"></div>
        <a class="tssjImg" href="${a.url}"><img src="${base}/${a.typeImg!site.defImg}"></a>
        <h1><a href="${a.url}">[@text_cut s=a.title len=titLen append='...'/]</a></h1>
        <p>${a.date?string(dateFormat)}</p>        
      </div>
      [/#list]
      <script type="text/javascript">
	//边框效果--移入
	function biankuang(obj){
		$(obj).find('.biankuang_1').stop(true).animate({
			height:'310px'
		},300)
		$(obj).find('.biankuang_2').stop(true).delay(300).animate({
			width:'370px'
		},300)
		$(obj).find('.biankuang_3').stop(true).animate({
			height:'310px'
		},300)
		$(obj).find('.biankuang_4').stop(true).delay(300).animate({
			width:'370px'
		},300)
	}
	//边框效果--移出
	function biankuang1(obj){
	
		$(obj).find('.biankuang_1').stop(true).delay(100).animate({
			height:'0px'
		},100)
		$(obj).find('.biankuang_2').stop(true).animate({
			width:'0px'
		},100)
		$(obj).find('.biankuang_3').stop(true).delay(100).animate({
			height:'0px'
		},100)
		$(obj).find('.biankuang_4').stop(true).animate({
			width:'0px'
		},100)
	}
	//触发
	$('.tssjItem').hover(
		function () {
		  var obj = $(this);
			biankuang(obj);
		},
		function () {
		  var obj = $(this);
			biankuang1(obj);
		}
	);
	</script>
    </div>
    [#include "../include/page.html"/]
    [/@cms_content_page]
  </section> 
</div>
[#include "../include/footer.html"/]
[#include "../include/right-fixed.html"/]
</body>
</html>